<template>
  <div class="child5">
    <div class="left">
      <div class="child-title">
        <span class="title-img"></span>
        <span class="title-ctx">{{ title }}学情概览-{{ titleTip }}</span>
        <el-tooltip
          class="item"
          effect="dark"
          content="今日数据为今日学习的生熟词及复习数，总数为当前系统的生熟词及复习词数"
          placement="top-start"
        >
          <i
            style="color:#E6A23C;font-size:20px;margin-left:10px"
            class="el-icon-warning-outline"
          ></i>
        </el-tooltip>
        <el-dropdown @command="checkModule" style="margin-left:20px;">
          <span class="el-dropdown-link">
            换模块
            <i class="el-icon-caret-bottom"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in classification"
              :key="item.id"
              :command="item.tag"
              ><span> {{ item.name }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div
        style="width: 100%;padding:10px"
        v-for="(item, index) in currentTableData"
        :key="index"
      >
        <table align="center" width="100%" class="table" border="0">
          <tbody>
            <tr>
              <th colspan="10" class="zxstyle ly">
                {{ titleTip }}-<span v-if="e == 'a2'">{{
                  natClassify[index]
                }}</span>
                <span v-else-if="e == 'a3'">{{ natClassifyFast[index] }}</span>
                <span v-else>{{ classify[index] }}</span>
              </th>
            </tr>
            <tr>
              <th class="zxstyle width_num">分类</th>
              <th class="zxstyle">生词</th>
              <th class="zxstyle">熟词</th>
              <th class="zxstyle">复习</th>
            </tr>
            <tr v-for="(item1, index1) in item" :key="index1">
              <td class="zxstyle width_num">
                {{ index1 == 0 ? title : "总数" }}
              </td>
              <td>{{ item1.strange_num }}</td>
              <td>{{ item1.familiarize_num }}</td>
              <td>{{ item1.re_study_num }}</td>
            </tr>
            <!-- <tr>
                  <td class="zxstyle width_num">总数</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                </tr> -->
          </tbody>
        </table>
      </div>
      <!-- <div class="nothing"  v-else>暂无学习数据</div> -->
    </div>
  </div>
</template>

<script>
const defaultTable = [
  {
    strange_num: 0,
    familiarize_num: 0,
    re_study_num: 0,
  },
  {
    strange_num: 0,
    familiarize_num: 0,
    re_study_num: 0,
  },
];
export default {
  created() {},
  data() {
    return {
      e: "a1",
      classification: [
        { name: "单词速记王", id: 1, tag: "a1" },
        { name: "自然拼读", id: 2, tag: "a2" },
        { name: "自然拼读快速版", id: 3, tag: "a3" },
        { name: "单词库", id: 4, tag: "a4" },
      ],
      titleTip: "单词速记王",
      titleClassfy: {
        a1: "单词速记王",
        a2: "自然拼读",
        a3: "自然拼读快速版",
        a4: "单词库",
      },
      classify: {
        0: "记忆",
        1: "词听",
        2: "听写",
        3: "默写",
      },
      natClassify: {
        0: "见词能读",
        1: "听音能写",
      },
      natClassifyFast: {
        0: "听读",
        1: "听写",
      },
      currentTableData: [],
      p: null,
    };
  },
  props: {
    title: { type: String, required: true },
  },
  methods: {
    checkModule(e) {
      if (e == this.e) return;
      this.e = e;
      this.setCurrentTableData(e);
      this.titleTip = this.titleClassfy[e];
    },
    drawMap(p) {
      this.e = "a1";
      this.p = p;
      this.titleTip = this.titleClassfy["a1"];
      this.setCurrentTableData("a1");
    },
    setCurrentTableData(tag) {
      this.currentTableData = new Array(4).fill(null).map((item) => {
        return JSON.parse(JSON.stringify(defaultTable));
      });
      this.p.today_source[tag].forEach((item) => {
        if (!item) return;
        if ((item && item.category) || item.category == 0) {
          this.$set(this.currentTableData[item.category], 0, item);
        }
      });
      this.p.total_source[tag].forEach((item) => {
        if (!item) return;
        if ((item && item.category) || item.category == 0) {
          this.$set(this.currentTableData[item.category], 1, item);
        }
      });
      // if(tag=='a2'||tag=='a3'){
      //   this.currentTableData=this.currentTableData.filter((item,index)=>{
      //     return index==0||index==2
      //   })
      // }
      // if(tag=='a4'){
      //   this.currentTableData=this.currentTableData.filter((item,index)=>{
      //     return index==0
      //   })
      // }
    },
  },
  watch: {
    titleTip(nv) {
      if (nv == "自然拼读" || nv == "自然拼读快速版") {
        this.currentTableData = this.currentTableData.filter((item, index) => {
          return index == 0 || index == 2;
        });
      }
      if (nv == "单词库") {
        this.currentTableData = this.currentTableData.filter((item, index) => {
          return index == 0;
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.child5 {
  padding: 39px 30px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: flex-start;
  .left {
    width: 100%;
    .child-title {
      height: 20px;
      line-height: 20px;
      .title-img {
        display: inline-block;
        width: 4px;
        height: 18px;
        position: relative;
        top: 3px;
        // background: linear-gradient(0deg, #1774ff, #438eff);
        background: $color-main;
      }
      .title-ctx {
        height: 20px;
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #363636;
        padding-left: 6px;
      }
    }
    .nothing {
      height: 283px;
      background: #fff;
      margin: 30px auto 20px;
      text-align: center;
      line-height: 283px;
      font-size: 30px;
    }
  }
  .table {
    border: 2px solid #efefef;
    td {
      border: 2px solid #efefef;
      text-align: center;
    }
  }
  .width_num {
    width: 10%;
  }
  .zxstyle {
    border: 2px solid #efefef;
    line-height: 40px;
    font-weight: bold;
    text-align: center;
  }
  .ly {
    border: 2px solid $color-main;
    background: $color-main;
    text-align: center;
    font-size: 16px;
    color: #ffff;
  }
  .table > tbody > tr > td {
    vertical-align: middle;
  }
}
</style>
